﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>搜索页面</title>
    <link href="Styles/pager.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery.query.js" type="text/javascript"></script>
    <script src="Scripts/jquery.ui.js" type="text/javascript"></script>
    <script src="Scripts/repeater.js" type="text/javascript"></script>
    <script src="Scripts/pager.js" type="text/javascript"></script>
    <script src="Scripts/blockUI.js" type="text/javascript"></script>
    <style type="text/css">
        body
        {
            background:url("../img/bg.png");
            font-family:"微软雅黑";
        }
        ul
        {
            margin: 0px;
            padding: 0px;
            color:Yellow;
            font-size:16px;
            font-weight:bold;
        }
        .header
        {
            margin: 0px auto;
            width: 500px;
        }
        .left-menu
        {
            width: 100px;
            float: left;
        }
        .left-menu li
        {
            cursor: pointer;
        }
        .current-item
        {
            background:gray;
        }
        .left-menu .count
        {
            font-weight: bold;
            color: yellow;
        }
        .result
        {
            border: 1px solid gray;
            width: 800px;
            float: left;
            min-height: 100px;
        }
        .hightlight
        {
            color: Red;
            font-weight: bold;
            font-size: 16px;
        }
        #pager
        {
            clear: both;
            margin: 0px auto;
            width: 500px;
        }
        #btnSearch
        {
            padding: 0px 7px;
              position: relative;
              border-top: 1px solid #f8db14;
              background: #f4c60f;
              background: -webkit-gradient(linear, 0 0, 0 100%, from(#f4c60f) to(#eea209));
              background: -webkit-linear-gradient(#f4c60f, #eea209);
              background: -moz-linear-gradient(#f4c60f, #eea209);
              background: -ms-linear-gradient(#f4c60f, #eea209);
              background: linear-gradient(#f4c60f, #eea209);
              background: -o-linear-gradient(#f4c60f, #eea209);
              -pie-background: linear-gradient(#f4c60f, #eea209);
              border-radius: 4px;
              -moz-border-radius: 4px;
              -webkit-border-radius: 4px;
              behavior: url(js/PIE.htc);
                height: 27px;
                width:80px;
                  line-height: 28px;
                  display: inline-block;
                  cursor: pointer;
                  background-color:yellow;
                  margin-left:10px;
                  text-align:center;
                 
        }
          #keywords
          {
               line-height:28px; 
               height:20px; 
               vertical-align:middle;
          }
          .title{}
          .title a
          {
              color:Yellow; 
              font-weight:bold; 
              font-size:14px;
          }
    </style>
</head>
<body>
    <div class="search-result-container">
        <div class="header">
            <input type="text" name="keywords" id="keywords" maxlength="20" /><span id="btnSearch">
               搜　　索</span></div>
        <div class="left-menu">
            <ul id="menu">
            </ul>
        </div>
        <div class="result" id="searchResult">
            <!--  <div class="title">
                <a href="detail.html?id=[Code]">[Title]</a></div>
            <div class="remark">
                [Remark]</div>-->
        </div>
        <div id="pager" psize='5'>
        </div>
    </div>
    <script type="text/javascript">

        $(function () {

            var typeCode = ""; //类型ID
            var keywords = $.query.get("key"); //关键字
            var $result = $("#searchResult"); //搜索结果div
            var pcount = 0; //页数
            /*获取类型数目函数*/
            var GetNum = function () {
                var keywords = $("#keywords").val();
                $.post("handler/SearchTypeNumHandler.ashx?t=" + new Date(), { keywords: keywords }, function (data) {
                    CreateMenu(data);
                });
            }
            /*读取左侧导航栏菜单开始*/
            var CreateMenu = function (obj) {

                $("#menu").each(function () {
                    $.get("handler/TourismTypeHandler.ashx?t=" + new Date(), function (d) {
                        if (d.data != "" && d.data != "undefinde") {
                            $("#menu").empty();
                            for (var i = 0; i < d.data.length; i++) {
                                $("#menu").append("<li id='" + d.data[i].Code + "'>"
                                   + d.data[i].Name + "<span class='count'>(" + obj[i] + ")</span>"
                                   + "</li>");
                            }
                            $("#menu li").each(function () {
                                $(this).click(function () {
                                    typeCode = $(this).attr("id");
                                    BindData(typeCode);
                                    $(this).addClass("current-item");
                                    $("#menu").find("li[id!='" + typeCode + "']").removeClass("current-item");
                                });
                            });
                        }
                    })
                })

            }
            /*读取左侧导航栏菜单结束*/
            GetNum(); //创建左侧导航类型和数目

            /*搜索按钮事件开始*/
            var BindData = function (type) {
                $result.template({ autoBind: false });
                $.ajax({ url: "handler/SearchHandler.ashx?t=" + new Date(),
                    data: { keywords: encodeURIComponent(keywords),
                        pindex: 1,
                        psize: $("#pager").attr("psize"),
                        typeCode: type
                    },
                    type: "post",
                    success: function (data) {
                        pcount = data.Data.Pager.PageCount;
                        $("#pager").pager({ pagenumber: 1, pagecount: pcount, buttonClickCallback: PageClick });
                        $result.template("bindData", data.Data.Rows);
                    }
                });
            }
            if (keywords != "" && keywords != "undefinde") {
                $("#keywords").val(keywords);
                BindData("");
            }
            /*搜索按钮事件开始*/
            $("#btnSearch").click(function () {
                typeCode = "";
                keywords = $("#keywords").val();
                if (keywords == "") {
                    alert("请输入关键字！");
                } else {
                    $.blockUI({ message: "<h2>数据加载中.......</h2>", css: { width: "300px", height: "50px"} });
                    GetNum();
                    BindData(typeCode);
                    $.unblockUI();
                }
            })
            /*搜索按钮事件结束*/

            //分页标签事件
            var PageClick = function (pageclickednumber) {

                $("#pager").pager({ pagenumber: pageclickednumber, pagecount: pcount, buttonClickCallback: PageClick });
                $.ajax({ url: "handler/SearchHandler.ashx?t=" + new Date(),
                    data: {
                        keywords: encodeURIComponent(keywords),
                        pindex: pageclickednumber,
                        psize: $("#pager").attr("psize"),
                        typecode: typeCode
                    },
                    type: "post",
                    success: function (data) {
                        $result.template("bindData", data.Data.Rows);
                    }
                });
            }
        })
        
    </script>
</body>
</html>
